<script setup lang="ts">
/* 
 * @description: 
 * @fileName: IndexView.vue
 * @params 
 * @author: lxx
 * @date: 2025-08-14 23:27:11"
 * @version: V1.0.0 
*/     
</script>
<template>
  <DpLayout>
    <template #header>
      <DpHeader title="统计数据大屏"></DpHeader>
    </template>
    <template #body>
      <div class="mxfx-content-box flex-center-between fill">
        <div class="content-left-box flex-center-between column">
            <DpBox height="33%">
            <template #title>
              <DpTitle title="销售额统计" />
              累计销售额，今日目标额，达成率（进度条/百分比），昨日对比（箭头+百分比）
            </template>
          </DpBox>
          <DpBox height="33%">
            <template #title>
              <DpTitle title="订单统计" />
            </template>
            累计订单数，昨日订单数，平均客单价（数值+与昨日/目标对比箭头）
          </DpBox>
          <DpBox height="33%">
            <template #title>
              <DpTitle :title="'今日验光人数'" />
            </template>
            今日已验光人数、其中最终配镜（成交）人数、验光转化率（配镜人数 / 验光人数 * 100%）、目标转化率（进度条）。
          </DpBox>
        </div>
        <div class="content-center-box flex-center-between column">
          <DpBox height="33%">
            <template #title>
              <DpTitle :title="'销售品类占比'" />
            </template>
            镜架、镜片、太阳镜、隐形眼镜、护理液、其他配件等主要品类的销售额占比（饼图），或者只显示Top 3品类及占比。
          </DpBox>
          <DpBox height="33%">
            <template #title>
              <DpTitle title="畅销单品排行榜 (Top 5)" />
            </template>
            内容： 列出最近7天/本月销售额或销售量最高的5款商品（镜架品牌型号、镜片类型、太阳镜品牌等）。
          </DpBox>
          <DpBox height="33%">
            <template #title>
              <DpTitle :title="'任务情况'" />
            </template>

          </DpBox>
        </div>
        <div class="content-right-box flex-center-between column">
          <DpBox height="33%">
            <template #title>
              <DpTitle :title="'任务详情'" />
            </template>
            
          </DpBox>
          <DpBox height="33%">
            <template #title>
              <DpTitle :title="'任务分类'" />
            </template>
            
          </DpBox>
          <DpBox height="33%">
            <template #title>
              <DpTitle :title="'模型任务列表'" />
            </template>
              
          </DpBox>
        </div>
      </div>
    </template>
  </DpLayout>
</template>
<style lang="scss" scoped>
.mxfx-content-box {
  height: 100%;
  padding: 0 10px 10px;
  box-sizing: border-box;
  .content-left-box {
    width: 30%;
    height: 100%;
  }

  .content-center-box {
    width: 39.5%;
    height: 100%;
  }

  .content-right-box {
    width: 30%;
    height: 100%;
  }
}
</style>
